import React, { PureComponent } from 'react'
import { View } from '@tarojs/components'
import { getPlatform } from '@UTILS/common'
import './DoctorCardPlaceholder.scss'
const { isRN } = getPlatform()
export default class DoctorCardPlaceholder extends PureComponent {
  renderCard = () => {
    const {
      count = 1, style = {}, width, height
    } = this.props
    const scrollStyle = isRN ? { width, height, ...style } : { width: `${width}px`, height: `${height}px`, ...style }
    return [...Array(count)].map((item, index) => (
      <View className="doctorCardPlaceholder" style={scrollStyle} key={index.toString()}>
        <View className="user-info">
          <View className="user-info-left">
            <View className="row row-half skeleton-blink" />
            <View className="row skeleton-blink" />
            <View className="row skeleton-blink" />
          </View>
          <View className="avatar skeleton-blink" />
        </View>
        <View>
          <View className="row skeleton-blink" />
          <View className="row skeleton-blink" />
        </View>
      </View>
    ))
  }

  render() {
    const { row } = this.props
    return (
      <View className={`${row ? 'flexRow' : 'flexColumn'}`}>
        {this.renderCard()}
      </View>
    )
  }
}
